<template>
	<view>
		<u-popup :show="show" @close="close" @open="open" :closeable="true">
			<view class="form">
				<u--form labelPosition="top" :model="formData" :rules="rules" ref="form" >
					<u-form-item label="照片:" prop="images" >
						<u-upload
							:fileList="images"
							@afterRead="afterRead"
							@delete="deletePic"
							name="file"
							:previewFullImage="true"
							:maxCount="9"
						></u-upload>
					</u-form-item>
					<u-form-item label="数量:" prop="num" v-if="datas.step = 11">
						<u--input type="number" v-model.number="formData.num" placeholder="请输入数量" ></u--input>
					</u-form-item>
					<u-form-item label="备注:" prop="desc">
						<u--textarea v-model="formData.desc" placeholder="请输入内容" ></u--textarea>
					</u-form-item>
					<view class="btn-item">
						<u-button type="primary" shape="circle" text="确认" @tap="submit"></u-button>
					</view>
				</u--form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { orderHandler } from '@/common/api.js'
	import upload from '@/common/upload.js'
	
	export default {
		name:"orderHandler",
		props: {
			datas: {
				type: Object,
				default: () => { return {} }
			}
		},
		data() {
			return {
				show: false,
				formData: {
					order_no: '',
					images: '',
					desc: '',
					step: '',
					step_label: '',
					isCommplete: 0
				},
				rules: {
					
				},
				images: [],
			};
		},
		methods: {
			open(){
				this.formData.order_no = this.datas.no
				this.formData.images = ''
				this.formData.desc = ''
				this.formData.num = ''
				this.formData.step = this.datas.step
				this.formData.step_label = this.datas.step_label
				this.formData.complete = this.datas.isCommplete
				this.images = []
				this.show = true
			},
			async afterRead(event) {
				const file = event.file
				const index = this.images.length
				this.images.push({
					...file,
					status: 'uploading',
					message: '上传中'
				})				
				const result = await upload({filePath: file.url})
				this.images.splice(index, 1, {...file,status: 'success', message: '', url: result.file.url})
			},
			deletePic(event){
				this.images.splice(event.index, 1)
			},
			close(){
				this.show = false
				this.$emit('onclose')
			},
			submit(){
				if(this.formData.desc.trim() == "" && this.formData.images.length == 0){
					return this.$toast('照片和备注至少填写一项!')
				}
				const params = {...this.formData}
				params.images = []
				this.images.forEach((item) => {
					params.images.push(item.url)
				})
				params.images = params.images.join(',')
				orderHandler(params).then((res) => {
					this.$toast('操作成功!')
					this.close()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form { padding: 30rpx;
		
	 }
	 .btn-item { padding-top: 20rpx; }
</style>